<script lang="ts" setup>
import { markRaw, onMounted } from 'vue'
import CAdminTable from '../CAdminTable.vue'
import { TableInfo } from '../tableInfo'
import { dbCompanies, Company } from './helpers/dbCompanies'
import DbFormContractor from './helpers/DbFormContractor.vue'
import { openModalConfirmation } from '../../CModalConfirmation/helpers'

const schema = [
  { id: 'name', label: '企業名' },
  { id: 'addressNum', label: '郵便番号' },
  { id: 'tel', label: '企業電話番号' },
  { id: 'personInCharge', label: '担当者名' },
  { id: 'licenseCount', label: '利用可能ライセンス数' },
  { id: 'statusContract', label: '契約状況' },
  { id: 'meta.serial', label: 'シリアルナンバー' },
  { id: 'dateCreated', label: '登録日' },
]

const tableInfo: TableInfo<Company> = {
  schemaColumns: schema,
  db: dbCompanies,
  componentForm: markRaw(DbFormContractor),
}

function openModal() {
  openModalConfirmation({
    title: 'hello',
    message: `it's me`,
  })
}
</script>

<docs>
検索入力欄を左揃えにするのに `p_SearchPosition="top-left"`
</docs>

<template>
  <CAdminTable
    :tableInfo="tableInfo"
    :p_Addable="true"
    p_Title="タイトル漢字english"
    p_SearchPosition="top-left"
  >
    <button style="margin-left: auto" @click="() => openModal()">open modal</button>
  </CAdminTable>
</template>
